import {Button, Dropdown, MenuProps, Radio, Tooltip} from "antd";
import {DownloadOutlined, SearchOutlined} from "@ant-design/icons";
import {useState} from "react";

function CcButton(){

    const [size, setSize] = useState("")

    const [loading, setLoading] = useState(false)
    const [loadings, setLoadings] = useState<boolean[]>([])


    const enterLoading = (index:number)=>{
        setLoadings(prevLoadings=>{
            const newLoadings = [...prevLoadings]
            newLoadings[index] = true
            return newLoadings;
        })


        setTimeout(()=>{
            setLoadings(prevLoadings=>{
                const newLoadings = [...prevLoadings]
                newLoadings[index] = false
                return newLoadings;
            })


        },2000)
    }

    const items = [
        {
            key: '1',
            label: '1st item',
        },
        {
            key: '2',
            label: '2nd item',
        },
        {
            key: '3',
            label: '3rd item',
        },
    ];


    const onMenuClick:MenuProps["onClick"] = (e)=>{
        console.log("click",e)
    }
    return (
        <div>CcButton

            <Button type="dashed">dashed button</Button>
            <Button type="text">dashed button</Button>
            <Button type="link">dashed button</Button>

            <Tooltip title="search">
                <Button type="primary" shape="circle" icon={<SearchOutlined/>}></Button>
                <Button type="primary"  href="http://www.baidu.com" size="large">
                    A
                </Button>
                <Button type="primary"  href="http://www.baidu.com" size="small">
                    A
                </Button>
                <Button type="primary"  href="http://www.baidu.com" size="middle" danger>
                    A
                </Button>
            </Tooltip>


            <Radio.Group value={size} onChange={(e)=>setSize(e.target.value)}>
                <Radio.Button value="large">large</Radio.Button>
                <Radio.Button value="default">default</Radio.Button>
                <Radio.Button value="small">small</Radio.Button>
            </Radio.Group>

            <Button type="primary" size={size} shape="round">download</Button>
            <Button type="primary" size={size} icon={<DownloadOutlined/>}>download</Button>



            <Button type="primary"
                    size="small"
                    danger
                    ghost
                    loading={loadings[0]} onClick={()=>enterLoading(0)}>loading</Button>


            <Button type="primary">primary</Button>

            <Dropdown.Button menu={{items,onClick:onMenuClick}}>actions</Dropdown.Button>


            <Button ghost disabled> Ghost(disable)</Button>

        </div>
    )
}

export default CcButton
